<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <ul>
      <li>
        销售部
        <ul>
          <li>销售1部</li>
          <li>销售2部</li>
        </ul>
      </li>
      <li>
        培训部
        <ul>
          <li>
            后端
            <ul>
              <li>Java</li>
              <li>PHP</li>
            </ul>
          </li>
          <li>前端</li>
        </ul>
      </li>
    </ul> -->

    <div id="box"></div>
    <script>
      const arr = [
        {
          dept: "销售部",
          children: [{ dept: "销售1部" }, { dept: "销售2部" }],
        },
        {
          dept: "培训部",
          children: [
            { dept: "后端", children: [{ dept: "java" }, { dept: "php" }] },
            { dept: "前端" },
          ],
        },
      ];

      function treeList(data = []) {
        const html = String.raw;
        return html`<ul>
          ${data
            .map((el) => {
              return `<li>
                ${el.dept}
                ${el.children ? treeList(el.children) : ""}
                </li>`;
            })
            .join("")}
        </ul>`;
      }

      document.getElementById("box").innerHTML = treeList(arr);
    </script>
  </body>
</html>
